<template>
  <div class="section-wrap">
    <!-- 头部 -->
    <div class="header">
      <x-icon style="fill:#fff;margin-top:8px;"2 type="ios-close-empty" size="30" class="icon-white" @click="goBack"></x-icon>
      <h3>{{title}}</h3>
      <a class="saveBtn" @click="saveDivision" v-if="canAudit">保存</a>
    </div>
    <div class="gap_div">
      <ul class="gap_list">
        <li class="clearfix" v-for="item in data" @click="popupKeyrequire(item)">
          <p>{{item.keyRequire}}</p>
          <span v-if="item.isMissingItem=='1'">缺项</span>
          <span v-else-if="item.isRate">{{item.actualScore}}</span>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </li>
      </ul>
    </div>
    <div v-transfer-dom>
      <popup v-model="keyrequire" width="100%" position="bottom" height="80%" :popup-style="{'z-index':'600'}" should-rerender-on-show>
        <standard :dataDetail="recordItem" @nodeClick="closeKeyrequire" @save="SaveItem" :canAudit="canAudit"></standard>
      </popup>
    </div>
  </div>
</template>
<script>
  import standard from "./standard";
  import { TransferDom, Popup } from "vux";
  export default {
    directives: {
      TransferDom
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      title: {
        type: String,
        default: ''
      },
      canAudit:{
        type:Boolean,
        default:true
      },
      ismissing:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        keyrequire: false, // 是否禁止输入
        recordItem: {
          keyRequire: '',
          shouldScore: 0,
          fileList:[]
        }
      }
    },
    components: {
      standard, Popup
    },
    created() {

    },
    methods: {
      goBack() {
        this.$emit("nodeClick");
      },
      popupKeyrequire(item) {
        //this.$emit("nodeClick");
        this.recordItem = item;
        this.keyrequire = true;
      },
      closeKeyrequire() {
        this.keyrequire = false;
      },
      SaveItem(data) {
        this.keyrequire = false;
        let common = this.data.filter(x => x.id == data.id);
        if (common.length == 1) {
          common[0].actualScore = data.actualScore;
          common[0].isMissingItem = data.isMissingItem;
          common[0].deductionReason = data.deductionReason;
          common[0].fileList = data.fileList;
        }
      },
      saveDivision() {
        this.$emit("saveDivision", this.data);
      }
    }
  }
</script>
<style lang="less" scoped>
  .gap_div {
    background: #fff;
    .gap_list

  {
    margin-left: 20px;
    li

  {
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid #ebeef2;
    .checkBox

  {
    display: block;
    height: 15px;
    width: 15px;
    background-repeat: no-repeat;
    background-image: url("/static/images/checkbox.png");
    background-size: 15px 15px;
    float: left;
    margin-top: 4px;
    margin-right: 5px;
  }

  .checkBox.active {
    background-image: url("/static/images/checked.png");
  }

  p {
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    width: 70%;
    float: left;
  }

  .vux-x-icon {
    fill: #999;
    float: right;
  }

  > i {
    display: block;
    height: 16px;
    padding: 0 5px;
    float: right;
    font-size: 12px;
    color: #fff;
    border-radius: 8px;
    background: #469b7a;
    line-height: 18px;
    text-align: center;
    text-indent: 0;
    margin-top: 3px;
  }

  }
  }
  }

  .btnsBox {
    padding: 40px 20px 55px;
    justify-content: center;
    display: flex;
    background: #fff;
    a

  {
    height: 40px;
    border-radius: 20px;
    display: inline-block;
    width: 200px;
    text-align: center;
    line-height: 44px;
    color: #fff;
  }

  
  }

  .saveBtn {
    background: #469b7a;
    color: #fff;
    float: right;
    padding-right: 15px;
    border-left:1px solid #fff;
    padding-left: 15px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    background-color: #469b7a;
    padding-right: 15px;
    h3 {
      color: #fff;
    }
  }
  .section-wrap {
      height: 100%;
      display: flex;
      flex-direction: column;
      .gap_div {
        flex: 1;
        overflow-y: scroll;
      }
    }
</style>
